<template>
  <div class="outer" v-if="detailData">
    <my-nav-bar class="nav-bar">
      <img
        class="left-arrow"
        slot="left"
        src="/img/icons/back.png"
        alt=""
        @click="onClickLeft"
      />
      <div slot="title" class="title">
        {{ detailData.name }}
      </div>
    </my-nav-bar>
    <div class="img-box">
      <img :src="detailData.poster" alt="图片" />
    </div>
    <div class="text-content">
      <span class="name">{{ detailData.name }} </span>
      <span class="item">{{ detailData.filmType.name }}</span>
      <div class="right-grade clearfix">
        {{ detailData.grade }}<span>分</span>
      </div>
      <p>{{ detailData.premiereAt | dataFilter }}上映</p>
      <p>{{ detailData.nation }} | {{ detailData.runtime }}分钟</p>
      <div :class="isShow ? '' : 'synopsis'">
        <p>{{ detailData.synopsis }}</p>
      </div>
      <p class="arrow" @click="isShow = !isShow">
        <i
          :class="
            isShow
              ? 'iconfont icon-icon-arrow-up'
              : 'iconfont icon-arrow-bottom-line'
          "
        ></i>
      </p>
    </div>
    <div class="line"></div>
    <div class="actors-box">
      <span>演职人员</span>
      <detail-swiper :slide="4" swiperclass="swiper-actiors">
        <div
          class="swiper-slide"
          v-for="(mdata, index) in detailData.actors"
          :key="index"
        >
          <img :src="mdata.avatarAddress" alt="图片" />
          <p>{{ mdata.name }}</p>
          <span class="role">{{ mdata.role }}</span>
        </div>
      </detail-swiper>
    </div>
    <div class="juzhao">
      <span>剧照</span>
      <div class="all clearfix">
        <span>全部（{{ detailData.photos.length }}）></span>
      </div>
      <detail-swiper :slide="2" swiperclass="swiper-photos">
        <div
          class="swiper-slide"
          v-for="(photo, index) in detailData.photos"
          :key="index"
          @click="picClick(detailData.photos, index)"
        >
          <img :src="photo" alt="图片" />
        </div>
      </detail-swiper>
    </div>
    <div class="bottom"><span>选座购票</span></div>
  </div>
</template>
<script>
import moment from "moment";
import Vue from "vue";
import { ImagePreview } from "vant";
import DetailSwiper from "./details/DetailSwiper.vue";
import MyNavBar from "@/components/details/NavBar";
import { mapState, mapMutations, mapActions } from "vuex";
// 全局注册
Vue.use(ImagePreview);
Vue.filter("dataFilter", (data) => {
  return moment(data * 1000).format("YYYY-MM-DD");
});
export default {
  components: { DetailSwiper, MyNavBar },
  data() {
    return {
      isShow: false,
      navbar: "",
      title: "",
    };
  },
  computed: {
    ...mapState("DetailModule", ["detailData", "detailId"]),
  },
  methods: {
    ...mapMutations("DetailModule", ["setDetailId"]),
    ...mapActions("DetailModule", ["getDetailData"]),
    picClick(photos, index) {
      ImagePreview({
        images: photos,
        startPosition: index,
      });
    },
    onClickLeft() {
      this.$router.back();
    },
  },
  mounted() {
    this.$store.commit("hideTab");
    if (this.detailId == this.$route.params.id) {
      return;
    }
    this.getDetailData(this.$route.params.id).then(() => {
      this.$nextTick(() => {
        //  this.$store.commit("detailId", this.$route.params.id);
        this.setDetailId(this.$route.params.id);
        //配置: 可根据个人需求
        window.onscroll = () => {
          var t = document.documentElement.scrollTop || document.body.scrollTop; //变量t就是滚动条滚动时，到顶部的距离
          this.navbar = document.getElementsByClassName("nav-bar")[0];
          this.title = document.getElementsByClassName("title")[0];
          var ch = this.navbar.clientHeight;
          if (t > ch) {
            this.navbar.style.background = "rgba(255, 255, 255, 1)";
            this.title.style.opacity = "1";
          } else {
            this.title.style.opacity = `${(t / ch).toFixed(1)}`;
            this.navbar.style.background = `rgba(255, 255, 255, ${(
              t / ch
            ).toFixed(1)})`;
          }
        };
      });
    });
  },
  destroyed() {
    this.navbar = null;
    this.title = null;
    window.onscroll = null;
    this.$store.commit("showTab");
  },
};
</script>
<style lang="less" scoped>
.outer {
  overflow-x: hidden;
  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0);
    .left-arrow {
      width: 30px;
      margin-left: -15px;
    }
    .title {
      opacity: 0;
    }
  }
  .img-box {
    width: 100%;
    height: 300px;
    overflow: hidden;
    img {
      width: 100%;
      transform: translateY(-50%);
    }
  }

  .text-content {
    text-align: left;
    padding: 10px;
    .name {
      color: #191a1b;
      font-size: 18px;
      height: 24px;
      line-height: 24px;
      margin-right: 7px;
    }
    .item {
      font-size: 9px;
      color: #fff;
      background-color: #d2d6dc;
      height: 14px;
      line-height: 14px;
      padding: 0 2px;
      border-radius: 2px;
      vertical-align: middle;
    }
    p {
      color: #797d82;
      font-size: 13px;
      margin-top: 4px;
    }
    .right-grade {
      float: right;
      color: #ffb232;
      font-size: 18px;
      font-style: italic;
      span {
        font-size: 10px;
      }
    }
    .synopsis {
      height: 38px;
      overflow: hidden;
    }
    .arrow {
      width: 100%;
      line-height: 10px;

      text-align: center;
      i {
        font-size: 20px;
      }
    }
  }
  .line {
    width: 100%;
    height: 10px;
    background: #eaeef1;
  }
  .actors-box {
    width: 100%;
    text-align: left;
    padding: 10px;
    p {
      padding-top: 10px;
      font-size: 12px;
      color: #191a1b;
      width: 85px;
      height: 18px;
      display: block;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .role {
      font-size: 10px;
      color: #797d82;
    }
    img {
      width: 85px;
    }
  }
  .juzhao {
    padding-left: 10px;
    width: 100%;
    margin-bottom: 49px;
    .all {
      float: right;
      margin-right: 20px;
      font-size: 13px;
      color: #797d82;
      height: 22.5px;
      line-height: 22px;
    }
    img {
      width: 100%;
    }
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 49px;
    width: 100%;
    text-align: center;
    background-color: #ff5f16;
    color: #fff;
    font-size: 16px;
    line-height: 49px;
    z-index: 999;
  }
}
</style>